<template>
    <PageView>
        <a-card title="可签到时间">
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="false"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
        <!--修改弹窗-->
        <a-modal title="修改" centered :visible="visible" @ok="handleOk" :confirmLoading="confirmLoading" @cancel="visible = false" width="360px">
            <a-form :form="form">
                <a-form-item label="时">
                    <a-input-number :min="0" :max="24" v-decorator="['hour', { rules: [{ required: true, message: '请输入小时' }] }]"/>
                </a-form-item>
                <a-form-item label="分">
                    <a-input-number :min="0" :max="60" v-decorator="['minute', { rules: [{ required: true, message: '请输入分钟' }] }]"/>
                </a-form-item>
                <a-form-item label="秒">
                    <a-input-number :min="0" :max="60" v-decorator="['second', { rules: [{ required: true, message: '请输入秒' }] }]"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </PageView>
</template>

<script type="text/jsx">
    import Turntable from '../../api/Turntable'

    export default {
        name: 'signTime',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '名称',
                        dataIndex: 'name',
                        customRender: (v) => <a>{v}</a>
                    },
                    {
                        title: '时',
                        dataIndex: 'hour',
                    },
                    {
                        title: '分',
                        dataIndex: 'minute',
                    },
                    {
                        title: '秒',
                        dataIndex: 'second',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 110,
                        customRender: (v) => {
                            return (
                                <a-button-group>
                                    <a-button
                                        type="primary"
                                        onClick={()=>{
                                            this.id = v.id
                                            this.visible = true
                                            this.$nextTick(()=>{
                                                Object.keys(this.form.getFieldsValue()).forEach(v1=>{
                                                    this.form.setFieldsValue({[v1]:v[v1]})
                                                })
                                            })
                                        }}>
                                        修改
                                    </a-button>
                                </a-button-group>
                            )
                        }
                    }
                ],
                data: [],
                confirmLoading:false,
                visible:false,
                form: this.$form.createForm(this),
                id:""
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getList () {
                this.loading = true
                Turntable.signList().then(res => {
                    this.data = res.data.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loading = false
                })
            },
            handleOk(){
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.confirmLoading = true
                        Turntable.signSave({...values,id:this.id}).then(res => {
                            this.confirmLoading = false
                            this.visible = false
                            this.getList()
                        }).catch(res=>{
                            this.visible = false
                            this.confirmLoading = false
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
</style>